{% extends 'backend.html' %}
{% load static %}
{% block head_js %}
    <script src="{% static 'Editor/kindeditor/kindeditor-all-min.js' %}"></script>
    <script src="{% static 'Editor/kindeditor/lang/zh-CN.js' %}"></script>
    <script src="{% static 'Editor/kindeditor/plugins/autoheight/autoheight.js' %}"></script>
{% endblock %}
{% block head_css %}
    <link rel="stylesheet" href="{% static 'Editor/kindeditor/themes/simple/simple.css' %}">
{% endblock %}
{% block backend_main %}
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">随笔</h3>
        </div>
        <div class="panel-body">
            {% block article_form %}
                <form class="layui-form layui-form-pane" id="addArticleForm">
                    {% csrf_token %}
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">随笔标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" autocomplete="off" placeholder="请输入"
                                   lay-verify="required" class="layui-input" id="title">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label for="create_time" class="layui-form-label">日期选择</label>
                            <div class="layui-input-block">
                                <input type="datetime-local" name="create_time" id="create_time" autocomplete="off"
                                       lay-verify="required" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章分类</label>
                        <div class="layui-input-inline">
                            {% if not category_all.exists %}
                                <div>
                                    <a href="{% url 'backend:addCategoryTag' 'category' %}">当前用户暂无分类，请先添加分类</a>
                                </div>
                            {% else %}
                                <select name="category" lay-filter="category">
                                    <option value=""></option>
                                    {% for category in category_all %}
                                        <option value="{{ category.pk }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="tags" class="layui-form-label">文章标签</label>
                        {% if not tags_all.exists %}
                            <div>
                                <a href="{% url 'backend:addCategoryTag' 'tag' %}">当前用户暂无标签，请先添加标签</a>
                            </div>
                        {% else %}
                            {% for tag in tags_all %}
                                <input type="checkbox" id="tags" name="tags" value="{{ tag.pk }}"
                                       title="{{ tag.name }}">
                            {% endfor %}
                        {% endif %}
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="article_content" class="layui-form-label">文章</label>
                        <div class="layui-input-block">
                            <textarea id="article_content" name="content" placeholder="请输入内容"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn" lay-submit lay-filter="addForm">确认</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
                <script>
                    layui.use(['form'], function () {
                        let form = layui.form;
                        // 提交事件
                        form.on('submit(addForm)', function () {
                            let formData = new FormData
                            $.each($('#addArticleForm').serializeArray(), function (index, data_dict) {
                                formData.append(data_dict.name, data_dict.value)
                            })
                            // 显示填写结果，仅作演示用
                            $.ajax({
                                url: '{% url 'article:add' request.user.username %}',
                                type: 'post',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    alert(res.msg)
                                    window.location.href = '{% url 'blog:site' request.user.username %}'
                                }
                            })
                        });
                        return false
                    });
                </script>
            {% endblock %}
        </div>
    </div>
    <script>
        KindEditor.ready(function (K) {
            // K.create('指定区域',{参数})
            window.editor = K.create('#article_content', {
                // resizeType : 可改变模式 2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动
                resizeType: 1,
                // themeType : 编辑器主题 【需要导入对应的css文件】
                themeType: 'simple',
                // 自动调整高度
                autoHeight: true,
                // 上传文件时，上传的url地址
                uploadJson: '{% url 'article:articleImg' %}',
                // 可以携带的额外的参数 为了通过csrf验证
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                }
            });
        });
    </script>
{% endblock %}